<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          我的媒体库
        </h2>
      </div>
    </div>
  </div>
</div>
{% if ServerSucess %}
<div class="page-body">
  <div class="container-xl">
    <div class="row row-deck row-cards">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-link-pop">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">电影</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-0 me-2">{{ MediaCount.MovieCount }}</div>
            </div>
          </div>
          <div id="chart-movie-bg" class="chart-sm"></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-link-pop">
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">电视剧/动漫</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-3 me-2">{{ MediaCount.SeriesCount }}</div>
              <div class="me-auto">
                <span class="text-green d-inline-flex align-items-center lh-1">
                  {{ MediaCount.EpisodeCount }}
                </span>
              </div>
            </div>
          </div>
          <div id="chart-tv-bg" class="chart-sm"></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-link-pop">
          <div class="card-stamp">
            <div class="card-stamp-icon" style="background-color: transparent">
              <img src="../static/img/music.png">
            </div>
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">音乐</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-3 me-2">{{ MediaCount.SongCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="card card-link-pop">
          <div class="card-stamp">
            <div class="card-stamp-icon" style="background-color: transparent">
              <img src="../static/img/users.png">
            </div>
          </div>
          <div class="card-body">
            <div class="d-flex align-items-center">
              <div class="subheader">活跃用户</div>
            </div>
            <div class="d-flex align-items-baseline">
              <div class="h1 mb-3 me-2">{{ UserCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="row row-cards">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <p class="mb-3">存储空间共 <strong>{{ TotalSpace }}</strong></p>
                <div class="progress progress-separated mb-3">
                  <div class="progress-bar bg-primary" role="progressbar" style="width: {{ UsedPercent }}%"></div>
                </div>
                <div class="row">
                  <div class="col-auto d-flex align-items-center pe-2">
                    <span class="legend me-2 bg-primary"></span>
                    <span>已使用</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ UsedSapce }}</span>
                  </div>
                  <div class="col-auto d-flex align-items-center ps-2">
                    <span class="legend me-2"></span>
                    <span>空闲</span>
                    <span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-muted">{{ FreeSpace }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <div class="card" style="height: 27rem">
              <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                <div class="divide-y">
                  {% for Activity in Activitys %}
                  <div>
                    <div class="row">
                      <div class="col-auto">
                        <span class="avatar">
                          {% if Activity.type == "LG" %}
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                             <desc>Download more icon variants from https://tabler-icons.io/i/user</desc>
                             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                             <circle cx="12" cy="7" r="4"></circle>
                             <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                          </svg>
                          {% else %}
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-play" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                             <desc>Download more icon variants from https://tabler-icons.io/i/player-play</desc>
                             <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                             <path d="M7 4v16l13 -8z"></path>
                          </svg>
                          {% endif %}
                        </span>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          {{ Activity.event }}
                        </div>
                        <div class="text-muted">{{ Activity.date }}</div>
                      </div>
                      <div class="col-auto align-self-center">
                        <div class="bg-primary"></div>
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% else %}
<div class="page-wrapper">
  <div class="container-xl">
  </div>
  <div class="page-body">
    <div class="container-xl d-flex flex-column justify-content-center">
      <div class="empty">
        <div class="empty-img"><img src="./static/img/bug_fixing.svg" height="128"  alt="">
        </div>
        <p class="empty-title">媒体服务器连接失败！</p>
        <p class="empty-subtitle text-muted">
          当前无法连接媒体服务器获取数据，请确认Emby/Jellyfin/Plex配置是否正确。
        </p>
      </div>
    </div>
  </div>
</div>
{% endif %}
<script type="text/javascript">
  // @formatter:off
  // 电影变化图
  window.ApexCharts && (new ApexCharts(document.getElementById('chart-movie-bg'), {
      chart: {
          type: "area",
          fontFamily: 'inherit',
          height: 40.0,
          sparkline: {
              enabled: true
          },
          animations: {
              enabled: true
          },
      },
      dataLabels: {
          enabled: false,
      },
      fill: {
          opacity: .16,
          type: 'solid'
      },
      stroke: {
          width: 2,
          lineCap: "round",
          curve: "smooth",
      },
      series: [{
          name: "电影",
          data: {{ MovieNums }}
      }],
      grid: {
          strokeDashArray: 4,
      },
      xaxis: {
          labels: {
              padding: 0,
          },
          tooltip: {
              enabled: false
          },
          axisBorder: {
              show: false,
          },
          type: 'category',
      },
      yaxis: {
          labels: {
              padding: 4
          },
      },
      labels: {{ MovieChartLabels|safe }},
      colors: ["#206bc4"],
      legend: {
          show: false,
      },
  })).render();
  // 电视剧变化图
  window.ApexCharts && (new ApexCharts(document.getElementById('chart-tv-bg'), {
      chart: {
          type: "line",
          fontFamily: 'inherit',
          height: 40.0,
          sparkline: {
              enabled: true
          },
          animations: {
              enabled: true
          },
      },
      fill: {
          opacity: 1,
      },
      stroke: {
          width: [2, 1],
          dashArray: [0, 3],
          lineCap: "round",
          curve: "smooth",
      },
      series: [{
          name: "电视剧",
          data: {{ TvNums }}
      },{
          name: "动漫",
          data: {{ AnimeNums }}
      }],
      grid: {
          strokeDashArray: 4,
      },
      xaxis: {
          labels: {
              padding: 0,
          },
          tooltip: {
              enabled: false
          },
          type: 'category',
      },
      yaxis: {
          labels: {
              padding: 4
          },
      },
      labels: {{ TvChartLabels|safe }},
      colors: ["#206bc4", "#a8aeb7"],
      legend: {
          show: false,
      },
  })).render();
  // @formatter:on
</script>